<template>
  <div class="flex flex-col gap-2">
    <div class="card flex flex-jus gap-2">
      <el-radio-group v-model="queryData.dateType" fill="#6cf">
        <el-radio-button label="就诊日期" value="0" />
        <el-radio-button label="锁号时间" value="1" />
      </el-radio-group>
      <span
        ><el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 300px"
          format="YYYY-MM-DD"
      /></span>
      <el-input v-model="queryData.inputText" style="width: 280px" placeholder="院内ID/姓名/身份证号/锁号单号" />
      <el-button @click="query">刷新</el-button>
    </div>
    <div class="card flex flex-col gap-2">
      <el-table border :data="payRecPagination.data" :height="tableHeight">
        <el-table-column label="序号" type="index" width="70" fixed="left" />
        <el-table-column label="锁号单号" fixed="left" prop="appointId" width="140" />
        <el-table-column label="锁号状态" prop="status" width="90">
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="success">正常</el-tag>
            <el-tag v-else-if="row.status === 1" type="danger">支付</el-tag>
            <el-tag v-else-if="row.status === 2" type="warning">爽约</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="院内ID" prop="patientId" width="160" />
        <el-table-column label="患者姓名" prop="name" width="120" />
        <el-table-column label="性别" prop="sex" width="70" />
        <el-table-column label="身份证号" prop="idNo" width="180" />
        <el-table-column label="就诊日期" prop="visitDate" width="120">
          <template #default="{ row }"> {{ dayjs(row.visitDate).format('YYYY-MM-DD') }} </template>
        </el-table-column>
        <el-table-column label="时间描述" prop="timeDesc" width="100" />
        <el-table-column label="科室" prop="deptName" width="200" />
        <el-table-column label="医生" prop="doctorName" width="100" />
        <el-table-column label="挂号金额" prop="clinicCharge" width="100" />
        <el-table-column label="锁号时间" prop="payDate" width="180" />
        <el-table-column label="锁号操作员" prop="payOperatorName" width="100" />
        <el-table-column label="操作" fixed="right" width="80">
          <template #default="{ row }">
            <el-button size="small" type="warning" @click="registerConfirmPayRef.display(row.clinicNo)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="queryData.currentPage"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="payRecPagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <RegisterConfirmPay ref="registerConfirmPayRef" />
  </div>
</template>

<script setup lang="ts">
import type { RegisterPayRecRes } from '@/api/register'
import { RegisterBusAPIs, type GetRegisterPayRecByPaginationReq } from '@/api/register'
import { ref, reactive } from 'vue'
import { dayjs, ElMessage } from 'element-plus'
import type { PaginationRes } from '@/api/common'
import RegisterConfirmPay from '@/views/register/components/RegisterConfirmPay.vue'

const dateRange = ref([])
const queryData = ref<GetRegisterPayRecByPaginationReq>({
  inputText: '',
  beginDate: '',
  endDate: '',
  currentPage: 1,
  pageSize: 20,
  dateType: '0',
})

const registerConfirmPayRef = ref<any>()
const payRecPagination = ref<PaginationRes<RegisterPayRecRes>>({
  total: 0,
  data: [],
})

// 表格高度
const tableHeight = computed(() => window.innerHeight - 310)

/**查询数据 */
async function query() {
  if (dateRange.value.length <= 0) {
    ElMessage.warning('请选择时间范围')
    return
  }
  queryData.value.beginDate = dayjs(dateRange.value[0]).format('YYYY-MM-DD')
  queryData.value.endDate = dayjs(dateRange.value[1]).format('YYYY-MM-DD')

  payRecPagination.value = await RegisterBusAPIs.getRegisterRec(queryData.value)
}

/** 页大小改变 */
const handleSizeChange = (val: number) => {
  queryData.value.pageSize = val
}

/** 当前页号 */
const handleCurrentChange = (val: number) => {
  queryData.value.currentPage = val
}

/** 监控 */
watch([() => queryData.value.currentPage, () => queryData.value.pageSize, () => queryData.value.inputText], () => {
  query()
})
</script>

<style lang="scss"></style>
